window.onload= function(){
    // 调用方法,设置头部背景透明度,在轮播图内随屏幕的滚动变化数值
    changeHeader();
    // 调用放大,设置掌上秒杀倒计时
    timeOut();
    // 调用开启京东轮播
    jdSlider();

    // 封装一个函数改变头部背景透明度的方法
    function changeHeader(){
        // 获取事件源
        var header = document.querySelector('header');
        // 获取轮播图区域的高度
        var sliderHeight = document.querySelector(".silder img").offsetHeight;
        // 绑定屏幕滚动事件
        window.onscroll = function(){
            //获取浏览器滚动的距离 , 需要设置兼容性
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || this.document.body.scrollTop;
            // 通过向上滚动的距离比上轮播图区域的高度的比值,设置头部的背景透明度的值
            var tmpOpa = scrollTop / sliderHeight;
            // 判断比值, 头部透明度不超过0.9
            if(tmpOpa >0.9){
                tmpOpa = 0.9;
            }
            // 修改头部背颜色样式
            header.style.backgroundColor = "rgba(201, 21, 35, "+tmpOpa+")";
        }
    };

    // 封装设置掌上秒杀倒计时的函数
    function timeOut(){
        // 获取事件源
        var spans = document.querySelectorAll(".second_kill_time>span");
        // 设置初始倒计时事件
        var times = 2*60*60 ;  //设置倒计2小时,转换为秒数
        // 根据初始时间调用渲染页面时间的方法
        timeRender();

        // 开启计时器,每过一秒钟,减少1秒实现倒计时
        var timerId = setInterval(function () {
            // 每过1秒.总时间减少1秒钟
            times--;
            // 根据递减1秒后重新渲染页面时间
            timeRender();

            // 判断倒计时结束,清除定时器
            if(times === 0){
                clearInterval(timerId);
                console.log('倒计时结束!')
            }
        },1000);

        // 封装渲染页面时间的函数
        function timeRender(){
            // 把最新的时间转为小时, 分, 秒的形式
            var hours = parseInt(times / 60 / 60); // 取整数部分
            var minutes = parseInt(times / 60 - hours * 60); // 分钟部分=总分钟数-小时分钟数
            var seconds = times - minutes * 60 - hours * 60 * 60; // 秒数部分=总秒数-分钟部分的秒数-小时部分的秒数

            // 把小时、分钟、秒数转为两位数
            var hoursTen = parseInt(hours / 10); // 十位数为小时数10的倍数,取整
            var hoursUnit = hours % 10; // 个位数小时数求余
            var minutesTen = parseInt(minutes / 10);
            var minutesUnit = minutes % 10;
            var secondsTen = parseInt(seconds / 10);
            var secondsUnit = seconds % 10;

            // 把获取到的十位数和个位数的小时数,分钟数,秒钟数渲染到页面
            spans[0].innerHTML = hoursTen;
            spans[1].innerHTML = hoursUnit;
            spans[3].innerHTML = minutesTen;
            spans[4].innerHTML = minutesUnit;
            spans[6].innerHTML = secondsTen;
            spans[7].innerHTML = secondsUnit;
        }
    };

    // 封装轮播图的方式
    function jdSlider(){
        //获取初始轮播图的索引值
        var index = 1;
        // 获取轮播图的事件源
        var silder_ul = document.querySelector(".silder_ul");
        // 获取最后一张轮播图的索引值
        var lastindex = silder_ul.querySelectorAll("li").length-1;
        // 获取倒数第二张索引
        var lasttwoindex = lastindex-1;

        // 获取索引器中的li标签
        var lis = document.querySelectorAll(".indexer li")

        // 根据索引值设置初始的轮播图位置
        silder_ul.style.transform = "translateX(-" + index + "0%)";

        // 调用开启定时器
        var timerId = jd_interval();

        // 给轮播图添加过渡结束事件
        silder_ul.addEventListener("transitionend",function(){
            // 判断过渡结束后轮播图的索引值
            if(index>=lastindex){
                index = 1; // 返回初始的索引位置
                //返回初始索引位置不需要过渡
                silder_ul.style.transition = "none";
                // 根据索引改变轮播图的位置
                silder_ul.style.transform = "translateX(-"+index+"0%)";
            }else if(index == 0){
                index = lasttwoindex; // 返回最后
                //返回初始索引位置不需要过渡
                silder_ul.style.transition = "none";
                // 根据索引改变轮播图的位置
                silder_ul.style.transform = "translateX(-" + index + "0%)";
            }
            console.log(index);

            // 索引器中的索引匹配对应的轮播图索引
            var tmpindex = index-1;
            //调用索引排他
            currentLi(tmpindex);
        });

        // 页面可见改变时间, 主要针对google在缩小页面时会停止页面过渡,但定时器则不会停止导致的bug
        document.addEventListener("visibilitychange",function(){
            //获取页面可见性
            var isHidden = document.hidden;
            console.log(isHidden);
            if (isHidden){
                //如果页面隐藏状态, 同时清除定时器
                clearInterval(timerId);
            }else{
                // 页面显示,重新开启定时器
                timerId = jd_interval();
            }
        })

        // 绑定滑动事件
        $$(".silder_ul").swipe(function(direction){
            // 开始滑动是清楚定时器
            clearInterval(timerId);

            // 优化(待测试)
            // 判断过渡结束后轮播图的索引值
            // if (index >= lastindex) {
            //     index = 1; // 返回初始的索引位置
            //     //返回初始索引位置不需要过渡
            //     silder_ul.style.transition = "none";
            //     // 根据索引改变轮播图的位置
            //     silder_ul.style.transform = "translateX(-" + index + "0%)";

            //     // 告诉浏览器不要优化（qq浏览案例的时候第二屏动画讲到） 每一步的过渡都执行完毕之后 再继续出发剩下的过渡
            //     document.querySelector(".slides_ul").offsetHeight;
            // } else if (index == 0) {
            //     index = lasttwoindex; // 返回最后
            //     //返回初始索引位置不需要过渡
            //     silder_ul.style.transition = "none";
            //     // 根据索引改变轮播图的位置
            //     silder_ul.style.transform = "translateX(-" + index + "0%)";
            // }

            //判断滑动的方向
            if(direction == "left"){ // 向左滑动
                // 轮播图索引要++
                index++;
                // 改变轮播图的位置并添加过渡
                silder_ul.style.transform = "translateX(-"+index+"0%)";
                silder_ul.style.transition = "transform .5s"
            } else if (direction == "right"){ // 向右滑动
                //轮播图索引要--
                index--;
                // 改变轮播图的位置并添加过渡
                silder_ul.style.transform = "translateX(-" + index + "0%)";
                silder_ul.style.transition = "transform .5s"
            }else{
                
            }
            // 结束滑动则开启定时器
            timerId = jd_interval();
        });

        // 开启轮播图的定时器
        function jd_interval(){
            timerId = setInterval(function(){
                index++;
                // 改变轮播图的位置并添加过渡
                silder_ul.style.transform = "translateX(-" + index + "0%)";
                silder_ul.style.transition = "transform .5s"
            },1000)
            return timerId;
        };

        // 索引器排他
        function currentLi(tmpindex){
            for(var i=0; i<lis.length; i++){
                //清除所有li标签中的类名
                lis[i].classList.remove("current");
            };

            // 设置选中的索引li标签
            lis[tmpindex].classList.add("current");
        }

    }

    
}